---
title: 'Next.js installation guide'
date: '2024-05-01'
lastmod: '2024-05-19'
tags:
  - 'documentation'
  - 'guide'
  - 'getting-started'
  - 'installation'
  - 'nextjs'
  - 'react'
  - 'tailwindcss'

summary: 'Learn how to install Page UI landing page components in your Next.js app. Install Tailwind CSS and configure the codebase in just a few steps.'
layout: PostHub
---

<span className="text-xl not-prose">
  Learn how to install Page UI in your Next.js app.
</span>

<br />

<Protip
  description={
    <>
      Skip the setup and use{' '}
      <a className="fancy-link" href="https://shipixen.com">
        Shipixen
      </a>{' '}
      to get a codebase with all components set up.
    </>
  }
/>

<br />

<StepCard stepNumber={1}>
## Create a new Next.js app
Start by creating a new Next.js app. You can use the following command:

```bash
npx create-next-app@latest my-app --typescript --tailwind --eslint # NB: you can replace my-app with your app name
```

</StepCard>

<br />

<StepCard stepNumber={2}>

## Run the Page UI CLI

```bash
cd my-app # NB: if you used a different app name, replace my-app with your app name
npx @page-ui/wizard@latest init
```

</StepCard>

<br />

<StepCard stepNumber={3}>

## Install dependencies

Add the required dependencies to your Next.js app:

```bash
npm install @tailwindcss/forms @tailwindcss/typography tailwindcss-animate embla-carousel-react class-variance-authority clsx tailwind-merge lucide-react @radix-ui/react-accordion @radix-ui/react-tabs @radix-ui/react-label
```

</StepCard>

<br />

<StepCard stepNumber={4}>

## Configure CSS

Add the below to your `global.css` file.<br/>

<StepCode>

```css:app/global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --hard-shadow: 0px 29px 52px 0px rgba(0, 0, 0, 0.4),
      22px 25px 16px 0px rgba(0, 0, 0, 0.2);
    --hard-shadow-left: 0px 29px 52px 0px rgba(0, 0, 0, 0.4),
      -22px 25px 16px 0px rgba(0, 0, 0, 0.2);
    /* If you use Shadcn UI already, you should already have these variables defined */
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary-foreground: 355.7 100% 97.3%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --radius: 0.5rem;
    --primary-lighter-hex: theme('colors.primary.200');
    --secondary-lighter-hex: theme('colors.secondary.200');
    --primary-dark-hex: theme('colors.primary.800');
    --secondary-dark-hex: theme('colors.secondary.800');
  }

  .dark {
    /* If you use Shadcn UI already, you can skip this block. */
    --background: 20 14.3% 4.1%;
    --foreground: 0 0% 95%;
    --card: 24 9.8% 10%;
    --card-foreground: 0 0% 95%;
    --popover: 0 0% 9%;
    --popover-foreground: 0 0% 95%;
    --primary-foreground: 144.9 80.4% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 15%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 12 6.5% 15.1%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 85.7% 97.3%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
  }

  body {
    font-family: Arial, Helvetica, sans-serif;
  }

  *,
  ::before,
  ::after {
    @apply border-gray-100 dark:border-neutral-800;
  }

  * {
    @apply font-sans;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-semibold font-display;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  /**
   * Perspective (used for images etc.)
   */
  .perspective-none {
    transform: none;
  }

  .perspective-left {
    box-shadow: var(--hard-shadow);
    transform: perspective(400em) rotateY(-15deg) rotateX(6deg)
      skew(-8deg, 4deg) translate3d(-4%, -2%, 0) scale(0.8);
  }

  .perspective-right {
    box-shadow: var(--hard-shadow-left);
    transform: perspective(400em) rotateY(15deg) rotateX(6deg) skew(8deg, -4deg)
      translate3d(4%, -2%, 0) scale(0.8);
  }

  .perspective-bottom {
    box-shadow: var(--hard-shadow);
    transform: translateY(-4%) perspective(400em) rotateX(18deg) scale(0.9);
  }

  .perspective-bottom-lg {
    box-shadow: var(--hard-shadow);
    transform: perspective(400em) translate3d(0, -6%, 0) rotateX(34deg)
      scale(0.8);
  }

  .perspective-paper {
    box-shadow: var(--hard-shadow);
    transform: rotateX(40deg) rotate(40deg) scale(0.8);
  }

  .perspective-paper-left {
    box-shadow: var(--hard-shadow-left);
    transform: rotateX(40deg) rotate(-40deg) scale(0.8);
  }

  /**
   * Custom shadows
   */
  .hard-shadow {
    box-shadow: var(--hard-shadow);
  }

  .hard-shadow-left {
    box-shadow: var(--hard-shadow-left);
  }

  /**
   * Container utilities
   */
  .container-narrow {
    @apply max-w-4xl;
  }

  .container-wide {
    @apply xl:max-w-6xl;
  }

  .container-ultrawide {
    @apply xl:max-w-7xl;
  }
}

```

</StepCode>

</StepCard>

<br />

<StepCard stepNumber={5}>

## Optional: configure fonts

Page UI uses `--font-space-default` and `--font-space-display` to configure fonts for headings and body text. You can change the font pairings in the `layout.tsx` file as shown below. <br />
Font pairings are available in the [Shipixen App (free download)](https://shipixen.com).

<StepCode>

```diff-ts:app/layout.tsx
import type { Metadata } from "next";
- import { Inter } from "next/font/google";
+ import { Inter, Syne } from 'next/font/google';

import "./globals.css";

- const inter = Inter({ subsets: ["latin"] });

+ const displayFont = Syne({
+   subsets: ['latin'],
+   display: 'swap',
+   variable: '--font-space-display',
+ });

+ const baseFont = Inter({
+   subsets: ['latin'],
+   display: 'swap',
+   variable: '--font-space-default',
+ });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
-     <body className={inter.className}>{children}</body>
+     <body className={`${baseFont.variable} ${displayFont.variable} scroll-smooth`}>{children}</body>
    </html>
  );
}

```

</StepCode>

</StepCard>

## Troubleshooting

Something not quite right? Check out the [sample repository](https://github.com/Shipixen/page-ui-nextjs-example) for a full working example.

## Theming

Get new themes directly from the docs (open any component documentation → select a theme from the dropdown and scroll down to copy to clipboard).

You can also [explore themes here](https://shipixen.com/color-theme-explorer-shadcn).

Alternatively, you can change `data/config/color.js` manually.

## Next steps

Start adding components to your Next.js app. <br/>

- copy & paste any section from [templates](https://shipixen.com/demo/landing-page-templates) (turn on thief mode)
- see a gigantic collection of [usage examples](https://shipixen.com/demo/landing-page-component-examples)
- go to the [component documentation](/docs/landing-page-components) to find more usage examples and documentation on props and customization.
